<template>
  <div>
    <div v-if="offEditPasDia" class="dialog-edit-wrap">
      <transition
        enter-active-class="animated bounceIn"
        leave-active-class="animated bounceOut"
        :duration="150"
      >
        <div v-if="editContent" class="edit-wrap">
          <p class="dis-cen input-wrap">
            <span>旧密码</span>
            <input v-model="oldPas" type="text">
          </p>
          <p class="dis-cen input-wrap">
            <span>新密码</span>
            <input v-model="newPas" type="text">
          </p>
          <p class="dis-cen input-wrap">
            <span>确认密码</span>
            <input v-model="confirmPassword" type="text">
          </p>
          <div class="dis-end op-btn-wrap">
            <p class="btn-com" @click="offEditPasDia=false">
              <span class="el-icon-close" />
              <span>取消</span>
            </p>
            <p v-loading="loading" class="btn-com" @click="save">
              <span class="el-icon-tickets" />
              <span>保存</span>
            </p>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import { updatePassword } from '@/api/user'
export default {
  data() {
    return {
      offEditPasDia: false,
      editContent: false,
      loading: false,
      newPas: '',
      oldPas: '',
      confirmPassword: ''
    }
  },
  watch: {
    offEditPasDia(v) {
      v ? setTimeout(() => {
        this.editContent = true
      }, 50) : this.editContent = false
    }
  },
  mounted() {
    this.$bus.on('editPasDialog', fun => {
      this.offEditPasDia = true
    })
  },
  destroyed: function() {
    this.$bus.off('editPasDialog')
  },
  methods: {
    // 修改密码
    save() {
      if (!this.newPas || this.newPas != this.confirmPassword) {
        this.$message({
          message: '请仔细检查输入的两次密码',
          type: 'error'
        })
        return
      }
      this.loading = true
      updatePassword({
        newPassword: this.newPas,
        oldPassword: this.oldPas,
        confirmPassword: this.confirmPassword
      })
        .then(res => {
          this.loading = false
          this.newPas = ''
          this.oldPas = ''
          this.confirmPassword = ''
          this.$message({
            message: '修改密码成功',
            type: 'success'
          })
          this.offEditPasDia = false
        })
        .catch(error => {
          this.loading = false
          console.log(error)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/com.scss";
@import "@/styles/variables.scss";
.dialog-edit-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 900;
  background: rgba(0, 0, 0, 0.5);
  .edit-wrap {
    width: 430px;
    height: 280px;
    padding: 30px 50px;
    margin: 85px auto 0;
    background: $nodeLightBk;
    box-shadow: 0 0 10px $boxShadow;
  }
  .input-wrap {
    padding: 5px 0;
    span {
      flex: 0 0 80px;
      font-size: 15px;
      color: #fff;
    }
    input {
      padding: 4px;
      outline: none;
      border: 1px solid $nodeBorder;
      border-radius: 4px;
      background: transparent;
      color: #fff;
    }
  }
  .op-btn-wrap {
    margin-right: 30px;
  }
  .btn-com {
    padding: 5px 8px;
    margin: 10px 0 0 18px;
    font-size: 15px;
  }
}
</style>
